<template>
	<view class="search-box">
		<!-- 定位 -->
		<view class="search-view">
			<image src="../../../static/platform.png" mode="widthFix"/>
			<text class="search-text">阿里巴巴淘宝城2期西溪园区</text>
			<text>></text>	
		</view>
		<!-- 搜索 -->
		<view class="search-cont">
			<view class="search">
				<image src="" mode="widthFix" class="search-img"></image>
				<input type="text" value="麻辣烫"  />
			</view>
		</view>
		<!-- 定义轮播 -->
		<view class="search-swiper">
			<swiper class="swiper" :indicator-dots="indicatorDots" :duration="duration">
				<block v-for="data in background">
					<swiper-item >
						<view v-for="item in data">
							<text><image src="../../../static/home.png" mode="widthFix"/></text>
							<text>{{item.text}}</text>
						</view>
					</swiper-item>
				</block>
				
			</swiper>
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				background: [
					[{text:'美食'}],
					[{text:'美食2'}]
				],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		}
	}
</script>

<style scoped>
	.search-view image{width: 35upx; height: 35upx;}
	.search-view{font-size: 30upx;font-weight: bold;display: flex;align-items: center;height: 80upx;}
	.search-text{padding: 0 10upx;}
	/* 搜索 */
	.search-cont{display: flex;justify-content: space-between;height: 70upx;align-items: center;}
	.search-img{margin: auto 0 auto 20upx;height: 40upx;width: 40upx;}
	.search{height: 70upx;line-height: 70upx;width: 100%; display: flex;flex-direction: flex;background: #eff3f4;border-radius: 10upx;}
	.search input{height: 70upx;line-height: 70upx;color: #666666;font-size: 25upx;width: 100%;}
	/* 自定义轮播 */
	
</style>
